<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优品商城 - 精选商品列表</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B35',
                        secondary: '#2EC4B6',
                        accent: '#E71D36',
                        neutral: '#2D3142',
                        light: '#F7F9FC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .product-card-hover {
                @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
            }
            .badge {
                @apply px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
            .btn-filter {
                @apply px-3 py-1.5 rounded-md text-sm border transition-all;
            }
            .text-balance {
                text-wrap: balance;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans text-neutral">
    <!-- 1. 顶部导航栏模块 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 品牌LOGO -->
                <a href="#" class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                    <span class="text-xl font-bold text-neutral">优品商城</span>
                </a>

                <!-- 主导航菜单（桌面端） -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-primary font-medium border-b-2 border-primary py-5 relative group">
                        全部商品
                        <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-primary transform scale-x-100 group-hover:scale-x-100 transition-transform origin-left"></span>
                    </a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors py-5 relative group">
                        新品上市
                        <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
                    </a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors py-5 relative group">
                        热卖榜单
                        <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
                    </a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors py-5 relative group">
                        限时特惠
                        <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
                    </a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors py-5 relative group">
                        品牌专区
                        <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-primary transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></span>
                    </a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <button class="text-gray-600 hover:text-primary transition-colors relative p-1.5">
                        <i class="fa fa-search text-lg"></i>
                    </button>
                    <button class="text-gray-600 hover:text-primary transition-colors relative p-1.5">
                        <i class="fa fa-heart-o text-lg"></i>
                        <span class="absolute -top-0.5 -right-0.5 w-4 h-4 bg-accent rounded-full text-white text-xs flex items-center justify-center">2</span>
                    </button>
                    <button class="text-gray-600 hover:text-primary transition-colors relative p-1.5">
                        <i class="fa fa-shopping-cart text-lg"></i>
                        <span class="absolute -top-0.5 -right-0.5 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center">3</span>
                    </button>
                    <div class="relative group">
                        <div class="flex items-center space-x-2 cursor-pointer">
                            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent hover:border-primary transition-colors">
                            <span class="text-gray-700 hidden sm:inline">会员用户</span>
                            <i class="fa fa-angle-down text-gray-500 text-xs"></i>
                        </div>
                        <!-- 用户下拉菜单 -->
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden group-hover:block transition-all">
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">个人中心</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">我的订单</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">收藏夹</a>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">购物车</a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary/5 hover:text-primary">设置</a>
                            <a href="#" class="block px-4 py-2 text-sm text-accent hover:bg-accent/5">退出登录</a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobile-menu-btn" class="md:hidden text-gray-600 p-1.5">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端导航菜单 -->
            <div id="mobile-menu" class="md:hidden hidden pb-4 border-t animate-fadeIn">
                <nav class="flex flex-col space-x-1 p-2">
                    <a href="#" class="text-primary font-medium px-3 py-2 rounded-md bg-primary/5">全部商品</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">新品上市</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">热卖榜单</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">限时特惠</a>
                    <a href="#" class="text-gray-600 hover:text-primary transition-colors px-3 py-2 rounded-md hover:bg-gray-50">品牌专区</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- 2. 面包屑导航模块 -->
    <section id="breadcrumb" class="bg-white border-b border-gray-100 py-3">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center text-sm text-gray-500">
                <a href="#" class="hover:text-primary transition-colors">首页</a>
                <i class="fa fa-angle-right mx-2 text-gray-300 text-xs"></i>
                <a href="#" class="hover:text-primary transition-colors">商品分类</a>
                <i class="fa fa-angle-right mx-2 text-gray-300 text-xs"></i>
                <a href="#" class="hover:text-primary transition-colors">电子产品</a>
                <i class="fa fa-angle-right mx-2 text-gray-300 text-xs"></i>
                <span class="text-gray-700">智能设备</span>
            </div>
        </div>
    </section>

    <!-- 3. 页面标题与搜索模块 -->
    <section id="page-header" class="py-8 bg-gradient-to-r from-primary/5 to-secondary/5">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral mb-3">智能设备专区</h1>
                <p class="text-gray-600 mb-6 max-w-2xl mx-auto text-balance">
                    精选高品质智能设备，为您的生活带来便捷与科技感，每款产品均经过严格筛选与品质检测
                </p>
                <div class="relative max-w-2xl mx-auto">
                    <input 
                        type="text" 
                        placeholder="搜索智能手表、蓝牙耳机、智能家居..." 
                        class="w-full pl-10 pr-12 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
                    >
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <button class="absolute right-1 top-1/2 transform -translate-y-1/2 bg-primary text-white px-4 py-1.5 rounded-md text-sm font-medium hover:bg-primary/90 transition-colors">
                        搜索
                    </button>
                </div>
                <div class="mt-5 flex flex-wrap justify-center gap-2 text-sm">
                    <span class="text-gray-500">热门搜索：</span>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors">智能手表</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors">无线耳机</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors">智能音箱</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors">运动手环</a>
                    <a href="#" class="text-gray-700 hover:text-primary transition-colors">智能家居套装</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="flex flex-col lg:flex-row gap-8">
            <!-- 左侧筛选区 -->
            <aside class="lg:w-1/4 xl:w-1/5">
                <!-- 4. 分类筛选模块 -->
                <section id="category-filter" class="bg-white rounded-xl shadow-sm p-5 mb-6 transform hover:shadow-md transition-shadow">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fa fa-th-list text-primary mr-2"></i>商品分类
                    </h3>
                    <ul class="space-y-2">
                        <li>
                            <label class="flex items-center justify-between space-x-2 text-primary font-medium cursor-pointer">
                                <div class="flex items-center">
                                    <input type="checkbox" checked class="form-checkbox h-4 w-4 text-primary rounded">
                                    <span>全部智能设备</span>
                                </div>
                                <span class="text-gray-500">(156)</span>
                            </label>
                        </li>
                        <li>
                            <label class="flex items-center justify-between space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <div class="flex items-center">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                    <span>智能手表</span>
                                </div>
                                <span class="text-gray-500">(32)</span>
                            </label>
                        </li>
                        <li>
                            <label class="flex items-center justify-between space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <div class="flex items-center">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                    <span>无线耳机</span>
                                </div>
                                <span class="text-gray-500">(48)</span>
                            </label>
                        </li>
                        <li>
                            <label class="flex items-center justify-between space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <div class="flex items-center">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                    <span>智能音箱</span>
                                </div>
                                <span class="text-gray-500">(19)</span>
                            </label>
                        </li>
                        <li>
                            <label class="flex items-center justify-between space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <div class="flex items-center">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                    <span>运动手环</span>
                                </div>
                                <span class="text-gray-500">(24)</span>
                            </label>
                        </li>
                        <li>
                            <label class="flex items-center justify-between space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <div class="flex items-center">
                                    <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                    <span>智能家居</span>
                                </div>
                                <span class="text-gray-500">(33)</span>
                            </label>
                        </li>
                    </ul>
                    <button class="mt-4 text-sm text-primary hover:text-primary/80 flex items-center">
                        更多分类 <i class="fa fa-angle-right ml-1"></i>
                    </button>
                </section>

                <!-- 5. 品牌筛选模块 -->
                <section id="brand-filter" class="bg-white rounded-xl shadow-sm p-5 mb-6 transform hover:shadow-md transition-shadow">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fa fa-building text-primary mr-2"></i>品牌筛选
                    </h3>
                    <div class="space-y-3">
                        <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                            <span>全部品牌</span>
                        </label>
                        <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                            <span>苹果 (Apple)</span>
                        </label>
                        <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                            <span>华为 (Huawei)</span>
                        </label>
                        <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                            <span>小米 (Xiaomi)</span>
                        </label>
                        <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                            <span>三星 (Samsung)</span>
                        </label>
                        <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                            <span>索尼 (Sony)</span>
                        </label>
                        <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                            <span>谷歌 (Google)</span>
                        </label>
                    </div>
                    <button class="mt-3 text-sm text-primary hover:text-primary/80 flex items-center">
                        显示更多品牌 <i class="fa fa-angle-down ml-1"></i>
                    </button>
                </section>

                <!-- 6. 价格筛选模块 -->
                <section id="price-filter" class="bg-white rounded-xl shadow-sm p-5 mb-6 transform hover:shadow-md transition-shadow">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fa fa-rmb text-primary mr-2"></i>价格范围
                    </h3>
                    <div class="px-2">
                        <input type="range" min="0" max="10000" value="5000" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary">
                        <div class="flex justify-between mt-2 text-sm text-gray-500">
                            <span>¥0</span>
                            <span>¥5000</span>
                            <span>¥10000+</span>
                        </div>
                    </div>
                    <div class="mt-4 flex items-center space-x-2">
                        <input type="number" placeholder="最低价" class="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                        <span class="text-gray-400">-</span>
                        <input type="number" placeholder="最高价" class="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                    </div>
                    <button class="w-full mt-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-sm">
                        确定
                    </button>
                </section>

                <!-- 7. 其他属性筛选模块 -->
                <section id="attribute-filter" class="bg-white rounded-xl shadow-sm p-5 mb-6 transform hover:shadow-md transition-shadow">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fa fa-sliders text-primary mr-2"></i>其他筛选
                    </h3>
                    
                    <!-- 评分筛选 -->
                    <div class="mb-5">
                        <h4 class="text-sm font-medium text-gray-700 mb-3">用户评分</h4>
                        <div class="space-y-2">
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="radio" name="rating" checked class="form-radio h-4 w-4 text-primary">
                                <span>全部评分</span>
                            </label>
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="radio" name="rating" class="form-radio h-4 w-4 text-primary">
                                <span>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    (5星)
                                </span>
                            </label>
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="radio" name="rating" class="form-radio h-4 w-4 text-primary">
                                <span>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star-o text-yellow-400"></i>
                                    (4星及以上)
                                </span>
                            </label>
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="radio" name="rating" class="form-radio h-4 w-4 text-primary">
                                <span>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star text-yellow-400"></i>
                                    <i class="fa fa-star-o text-yellow-400"></i>
                                    <i class="fa fa-star-o text-yellow-400"></i>
                                    (3星及以上)
                                </span>
                            </label>
                        </div>
                    </div>
                    
                    <!-- 促销筛选 -->
                    <div>
                        <h4 class="text-sm font-medium text-gray-700 mb-3">促销活动</h4>
                        <div class="space-y-2">
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                <span>限时折扣</span>
                            </label>
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                <span>满减优惠</span>
                            </label>
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                <span>领券立减</span>
                            </label>
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                <span>新品特惠</span>
                            </label>
                            <label class="flex items-center space-x-2 text-gray-600 cursor-pointer hover:text-primary transition-colors">
                                <input type="checkbox" class="form-checkbox h-4 w-4 text-primary rounded">
                                <span>套装优惠</span>
                            </label>
                        </div>
                    </div>
                </section>

                <!-- 8. 销量趋势模块 -->
                <section id="sales-trends" class="bg-white rounded-xl shadow-sm p-5 transform hover:shadow-md transition-shadow">
                    <h3 class="font-bold text-lg mb-4 flex items-center">
                        <i class="fa fa-line-chart text-primary mr-2"></i>销量趋势
                    </h3>
                    <div class="h-48">
                        <canvas id="salesChart"></canvas>
                    </div>
                    <div class="mt-4 text-sm text-gray-500 text-center">
                        近30天各类智能设备销量趋势
                    </div>
                </section>
            </aside>

            <!-- 右侧内容区 -->
            <div class="lg:w-3/4 xl:w-4/5">
                <!-- 9. 排序与视图控制模块 -->
                <section id="sort-control" class="bg-white rounded-xl shadow-sm p-4 mb-6">
                    <div class="flex flex-wrap items-center justify-between gap-4">
                        <div class="flex items-center space-x-4">
                            <span class="text-sm text-gray-500">排序方式：</span>
                            <select class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                <option>推荐优先</option>
                                <option>销量从高到低</option>
                                <option>价格从低到高</option>
                                <option>价格从高到低</option>
                                <option>评分从高到低</option>
                                <option>最新上架</option>
                            </select>
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <span class="text-sm text-gray-500">显示方式：</span>
                            <div class="flex border rounded-md overflow-hidden">
                                <button id="grid-view" class="px-3 py-2 bg-primary text-white hover:bg-primary/90 transition-colors">
                                    <i class="fa fa-th-large"></i>
                                </button>
                                <button id="list-view" class="px-3 py-2 bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                                    <i class="fa fa-list"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <span class="text-sm text-gray-500">每页显示：</span>
                            <select class="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                                <option>12</option>
                                <option>24</option>
                                <option>36</option>
                            </select>
                        </div>
                        
                        <div class="text-sm text-gray-500">
                            找到 <span class="text-primary font-medium">156</span> 件商品
                        </div>
                    </div>
                </section>

                <!-- 10. 快速筛选标签模块 -->
                <section id="quick-filter" class="mb-6 overflow-x-auto pb-2">
                    <div class="flex space-x-2 min-w-max">
                        <button class="px-4 py-2 bg-primary text-white rounded-full text-sm font-medium hover:bg-primary/90 transition-colors">
                            全部商品
                        </button>
                        <button class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors shadow-sm">
                            新品上市
                        </button>
                        <button class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors shadow-sm">
                            热销爆款
                        </button>
                        <button class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors shadow-sm">
                            好评商品
                        </button>
                        <button class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors shadow-sm">
                            顺丰包邮
                        </button>
                        <button class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors shadow-sm">
                            支持分期
                        </button>
                        <button class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors shadow-sm">
                            以旧换新
                        </button>
                        <button class="px-4 py-2 bg-white text-gray-700 rounded-full text-sm font-medium hover:bg-gray-50 transition-colors shadow-sm">
                            官方正品
                        </button>
                    </div>
                </section>

                <!-- 11. 促销商品模块 -->
                <section id="promotion-products" class="mb-10">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-xl font-bold flex items-center">
                            <i class="fa fa-fire text-accent mr-2"></i> 限时特惠
                        </h2>
                        <div class="flex items-center space-x-2 bg-accent/10 text-accent px-3 py-1 rounded-full text-sm">
                            <i class="fa fa-clock-o"></i>
                            <span id="countdown">08:45:32</span>
                            <span>后结束</span>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 促销商品1 -->
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden product-card-hover border border-gray-100">
                            <div class="relative">
                                <img src="https://picsum.photos/id/96/500/300" alt="智能手表" class="w-full h-48 object-cover">
                                <div class="absolute top-0 left-0 bg-accent text-white px-3 py-1 text-sm font-medium">
                                    限时7折
                                </div>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-2 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="p-5">
                                <div class="mb-2">
                                    <span class="badge bg-blue-100 text-blue-800">智能手表</span>
                                    <span class="badge bg-green-100 text-green-800 ml-1">热销</span>
                                </div>
                                <h3 class="font-bold text-lg mb-2 line-clamp-1">高级智能手表 Pro 4</h3>
                                <div class="flex items-center mb-3">
                                    <div class="flex text-yellow-400 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                    </div>
                                    <span class="ml-2 text-sm text-gray-500">(128评价)</span>
                                </div>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                                    全触控高清大屏，支持心率监测、血氧检测、睡眠分析，50米防水，续航可达14天。
                                </p>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="text-accent font-bold text-xl">¥899</span>
                                        <span class="text-gray-400 text-sm line-through ml-2">¥1299</span>
                                    </div>
                                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-sm flex items-center">
                                        <i class="fa fa-shopping-cart mr-1"></i> 加入购物车
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 促销商品2 -->
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden product-card-hover border border-gray-100">
                            <div class="relative">
                                <img src="https://picsum.photos/id/201/500/300" alt="无线蓝牙耳机" class="w-full h-48 object-cover">
                                <div class="absolute top-0 left-0 bg-accent text-white px-3 py-1 text-sm font-medium">
                                    限时直降
                                </div>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-accent p-2 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="p-5">
                                <div class="mb-2">
                                    <span class="badge bg-purple-100 text-purple-800">无线耳机</span>
                                    <span class="badge bg-primary/10 text-primary ml-1">新品</span>
                                </div>
                                <h3 class="font-bold text-lg mb-2 line-clamp-1">降噪无线蓝牙耳机 Max</h3>
                                <div class="flex items-center mb-3">
                                    <div class="flex text-yellow-400 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <span class="ml-2 text-sm text-gray-500">(86评价)</span>
                                </div>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                                    主动降噪，高清通话，IPX7防水，30小时续航，支持无线充电，触控操作。
                                </p>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="text-accent font-bold text-xl">¥599</span>
                                        <span class="text-gray-400 text-sm line-through ml-2">¥799</span>
                                    </div>
                                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-sm flex items-center">
                                        <i class="fa fa-shopping-cart mr-1"></i> 加入购物车
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 促销商品3 -->
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden product-card-hover border border-gray-100">
                            <div class="relative">
                                <img src="https://picsum.photos/id/160/500/300" alt="智能音箱" class="w-full h-48 object-cover">
                                <div class="absolute top-0 left-0 bg-accent text-white px-3 py-1 text-sm font-medium">
                                    满减优惠
                                </div>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-2 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="p-5">
                                <div class="mb-2">
                                    <span class="badge bg-green-100 text-green-800">智能音箱</span>
                                    <span class="badge bg-blue-100 text-blue-800 ml-1">AI语音</span>
                                </div>
                                <h3 class="font-bold text-lg mb-2 line-clamp-1">智能家居控制音箱 Mini</h3>
                                <div class="flex items-center mb-3">
                                    <div class="flex text-yellow-400 text-sm">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                    </div>
                                    <span class="ml-2 text-sm text-gray-500">(215评价)</span>
                                </div>
                                <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                                    360°环绕立体声，AI语音助手，智能家居控制中心，支持多种连接方式。
                                </p>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="text-accent font-bold text-xl">¥299</span>
                                        <span class="text-gray-400 text-sm line-through ml-2">¥399</span>
                                    </div>
                                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-sm flex items-center">
                                        <i class="fa fa-shopping-cart mr-1"></i> 加入购物车
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 12. 商品列表模块 -->
                <section id="product-list">
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-xl font-bold flex items-center">
                            <i class="fa fa-th text-primary mr-2"></i> 全部商品
                        </h2>
                        <div class="flex items-center">
                            <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                                <i class="fa fa-th-large mr-1"></i>
                                <span class="text-sm hidden sm:inline">网格</span>
                            </button>
                            <span class="mx-2 text-gray-300">|</span>
                            <button class="flex items-center text-gray-500 hover:text-primary transition-colors">
                                <i class="fa fa-th-list mr-1"></i>
                                <span class="text-sm hidden sm:inline">列表</span>
                            </button>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" id="product-container">
                        <!-- 商品卡片1 -->
                        <article class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100 product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/119/500/300" alt="运动手环" class="w-full h-40 object-cover">
                                <span class="absolute top-3 left-3 badge bg-blue-100 text-blue-800">运动手环</span>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1.5 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                </div>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <div class="flex items-center text-white text-sm">
                                        <i class="fa fa-bolt mr-1"></i>
                                        <span>已售 2368 件</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-base mb-2 line-clamp-1">专业运动手环 健康监测</h3>
                                <div class="flex items-center mb-2">
                                    <div class="flex text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                    </div>
                                    <span class="ml-1 text-xs text-gray-500">(452)</span>
                                </div>
                                <p class="text-gray-600 text-xs mb-3 line-clamp-2">
                                    24小时心率监测，睡眠分析，14种运动模式，50米防水，长达15天续航。
                                </p>
                                <div class="flex justify-between items-center">
                                    <span class="text-accent font-bold text-lg">¥199</span>
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-xs">
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        </article>

                        <!-- 商品卡片2 -->
                        <article class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100 product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/180/500/300" alt="智能摄像头" class="w-full h-40 object-cover">
                                <span class="absolute top-3 left-3 badge bg-green-100 text-green-800">智能家居</span>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-accent p-1.5 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <div class="flex items-center text-white text-sm">
                                        <i class="fa fa-bolt mr-1"></i>
                                        <span>已售 1542 件</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-base mb-2 line-clamp-1">高清智能摄像头 夜视版</h3>
                                <div class="flex items-center mb-2">
                                    <div class="flex text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                    </div>
                                    <span class="ml-1 text-xs text-gray-500">(328)</span>
                                </div>
                                <p class="text-gray-600 text-xs mb-3 line-clamp-2">
                                    1080P全高清，360°全景监控，智能夜视，移动侦测，双向语音，云存储。
                                </p>
                                <div class="flex justify-between items-center">
                                    <span class="text-accent font-bold text-lg">¥249</span>
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-xs">
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        </article>

                        <!-- 商品卡片3 -->
                        <article class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100 product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/201/500/300" alt="无线耳机" class="w-full h-40 object-cover">
                                <span class="absolute top-3 left-3 badge bg-purple-100 text-purple-800">无线耳机</span>
                                <span class="absolute top-3 left-24 badge bg-primary/10 text-primary">新品</span>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1.5 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                </div>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <div class="flex items-center text-white text-sm">
                                        <i class="fa fa-bolt mr-1"></i>
                                        <span>已售 986 件</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-base mb-2 line-clamp-1">时尚无线耳机 炫彩灯光</h3>
                                <div class="flex items-center mb-2">
                                    <div class="flex text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <span class="ml-1 text-xs text-gray-500">(156)</span>
                                </div>
                                <p class="text-gray-600 text-xs mb-3 line-clamp-2">
                                    头戴式设计，HiFi音质，主动降噪，30小时续航，折叠便携，多彩灯光效果。
                                </p>
                                <div class="flex justify-between items-center">
                                    <span class="text-accent font-bold text-lg">¥399</span>
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-xs">
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        </article>

                        <!-- 商品卡片4 -->
                        <article class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100 product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/160/500/300" alt="智能音箱" class="w-full h-40 object-cover">
                                <span class="absolute top-3 left-3 badge bg-green-100 text-green-800">智能音箱</span>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1.5 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                </div>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <div class="flex items-center text-white text-sm">
                                        <i class="fa fa-bolt mr-1"></i>
                                        <span>已售 1842 件</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-base mb-2 line-clamp-1">智能音箱 低音炮</h3>
                                <div class="flex items-center mb-2">
                                    <div class="flex text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <i class="fa fa-star-o"></i>
                                    </div>
                                    <span class="ml-1 text-xs text-gray-500">(278)</span>
                                </div>
                                <p class="text-gray-600 text-xs mb-3 line-clamp-2">
                                    高保真音质，强劲低音，AI语音助手，智能家居控制，支持多设备互联。
                                </p>
                                <div class="flex justify-between items-center">
                                    <span class="text-accent font-bold text-lg">¥499</span>
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-xs">
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        </article>

                        <!-- 商品卡片5 -->
                        <article class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100 product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/96/500/300" alt="智能手表" class="w-full h-40 object-cover">
                                <span class="absolute top-3 left-3 badge bg-blue-100 text-blue-800">智能手表</span>
                                <span class="absolute top-3 left-24 badge bg-accent/10 text-accent">热销</span>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1.5 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart-o"></i>
                                    </button>
                                </div>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <div class="flex items-center text-white text-sm">
                                        <i class="fa fa-bolt mr-1"></i>
                                        <span>已售 3256 件</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-base mb-2 line-clamp-1">轻薄智能手表 时尚款</h3>
                                <div class="flex items-center mb-2">
                                    <div class="flex text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </div>
                                    <span class="ml-1 text-xs text-gray-500">(521)</span>
                                </div>
                                <p class="text-gray-600 text-xs mb-3 line-clamp-2">
                                    全触摸高清屏，时尚设计，多种运动模式，心率监测，5天续航，IP68防水。
                                </p>
                                <div class="flex justify-between items-center">
                                    <span class="text-accent font-bold text-lg">¥699</span>
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-xs">
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        </article>

                        <!-- 商品卡片6 -->
                        <article class="bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100 product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/111/500/300" alt="智能插座" class="w-full h-40 object-cover">
                                <span class="absolute top-3 left-3 badge bg-green-100 text-green-800">智能家居</span>
                                <div class="absolute top-3 right-3">
                                    <button class="bg-white/80 backdrop-blur-sm text-accent p-1.5 rounded-full shadow-sm transition-colors">
                                        <i class="fa fa-heart"></i>
                                    </button>
                                </div>
                                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-3">
                                    <div class="flex items-center text-white text-sm">
                                        <i class="fa fa-bolt mr-1"></i>
                                        <span>已售 2156 件</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-4">
                                <h3 class="font-bold text-base mb-2 line-clamp-1">WiFi智能插座 定时开关</h3>
                                <div class="flex items-center mb-2">
                                    <div class="flex text-yellow-400 text-xs">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                    </div>
                                    <span class="ml-1 text-xs text-gray-500">(387)</span>
                                </div>
                                <p class="text-gray-600 text-xs mb-3 line-clamp-2">
                                    远程控制，定时开关，电量统计，语音控制，过载保护，适用多种家电。
                                </p>
                                <div class="flex justify-between items-center">
                                    <span class="text-accent font-bold text-lg">¥89</span>
                                    <button class="px-3 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors text-xs">
                                        加入购物车
                                    </button>
                                </div>
                            </div>
                        </article>
                    </div>
                </section>

                <!-- 13. 分页模块 -->
                <section id="pagination" class="mt-10 flex justify-center">
                    <nav class="inline-flex rounded-md shadow-sm">
                        <a href="#" class="relative inline-flex items-center px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition-colors">
                            <i class="fa fa-chevron-left"></i>
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                            1
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                            2
                        </a>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                            3
                        </a>
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                            8
                        </a>
                        <a href="#" class="relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 transition-colors">
                            <i class="fa fa-chevron-right"></i>
                        </a>
                    </nav>
                </section>

                <!-- 14. 用户评价模块 -->
                <section id="user-reviews" class="mt-16 bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-comments text-primary mr-2"></i> 用户真实评价
                    </h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 评价1 -->
                        <div class="border-b border-gray-100 pb-6 md:border-b-0 md:pb-0">
                            <div class="flex">
                                <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <h4 class="font-medium">王小明</h4>
                                        <div class="flex text-yellow-400 text-xs">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                        </div>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">
                                        智能手表很好用，功能齐全，续航也不错，一周充一次电足够了，心率监测很准确。
                                    </p>
                                    <div class="mt-2 flex gap-2">
                                        <img src="https://picsum.photos/id/96/100/100" alt="用户上传图片" class="w-16 h-16 rounded object-cover">
                                        <img src="https://picsum.photos/id/201/100/100" alt="用户上传图片" class="w-16 h-16 rounded object-cover">
                                    </div>
                                    <div class="mt-2 text-xs text-gray-500">
                                        评价于 轻薄智能手表 时尚款 · 5天前
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评价2 -->
                        <div class="border-b border-gray-100 pb-6 md:border-b-0 md:pb-0 lg:border-l lg:border-r border-gray-100 lg:px-6">
                            <div class="flex">
                                <img src="https://picsum.photos/id/26/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <h4 class="font-medium">李华</h4>
                                        <div class="flex text-yellow-400 text-xs">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-half-o"></i>
                                        </div>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">
                                        无线耳机音质很好，降噪效果超出预期，戴着跑步也很稳定，续航能力强，值得购买。
                                    </p>
                                    <div class="mt-2 text-xs text-gray-500">
                                        评价于 时尚无线耳机 炫彩灯光 · 1周前
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评价3 -->
                        <div>
                            <div class="flex">
                                <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                <div class="ml-3 flex-1">
                                    <div class="flex items-center justify-between">
                                        <h4 class="font-medium">张小红</h4>
                                        <div class="flex text-yellow-400 text-xs">
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                            <i class="fa fa-star-o"></i>
                                        </div>
                                    </div>
                                    <p class="text-sm text-gray-600 mt-1">
                                        智能插座很方便，手机远程控制很灵敏，定时功能帮我省了不少电，就是APP界面可以再优化一下。
                                    </p>
                                    <div class="mt-2 flex gap-2">
                                        <img src="https://picsum.photos/id/111/100/100" alt="用户上传图片" class="w-16 h-16 rounded object-cover">
                                    </div>
                                    <div class="mt-2 text-xs text-gray-500">
                                        评价于 WiFi智能插座 定时开关 · 3天前
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-6 text-center">
                        <a href="#" class="text-primary hover:text-primary/80 inline-flex items-center">
                            查看全部评价 <i class="fa fa-angle-right ml-1"></i>
                        </a>
                    </div>
                </section>

                <!-- 15. 相关推荐模块 -->
                <section id="related-products" class="mt-16">
                    <h2 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa fa-th-large text-primary mr-2"></i> 猜你喜欢
                    </h2>
                    
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                        <!-- 推荐商品1 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/119/300/300" alt="智能手环" class="w-full h-36 object-cover">
                                <button class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1 rounded-full shadow-sm transition-colors">
                                    <i class="fa fa-heart-o text-xs"></i>
                                </button>
                            </div>
                            <div class="p-3">
                                <h3 class="font-medium text-sm line-clamp-2 mb-1">智能手环 彩屏触控</h3>
                                <div class="flex text-yellow-400 text-xs mb-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <span class="text-accent font-bold text-sm">¥129</span>
                            </div>
                        </div>
                        
                        <!-- 推荐商品2 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/160/300/300" alt="蓝牙音箱" class="w-full h-36 object-cover">
                                <button class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1 rounded-full shadow-sm transition-colors">
                                    <i class="fa fa-heart-o text-xs"></i>
                                </button>
                            </div>
                            <div class="p-3">
                                <h3 class="font-medium text-sm line-clamp-2 mb-1">迷你蓝牙音箱 便携</h3>
                                <div class="flex text-yellow-400 text-xs mb-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half-o"></i>
                                </div>
                                <span class="text-accent font-bold text-sm">¥159</span>
                            </div>
                        </div>
                        
                        <!-- 推荐商品3 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/201/300/300" alt="无线充电器" class="w-full h-36 object-cover">
                                <button class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1 rounded-full shadow-sm transition-colors">
                                    <i class="fa fa-heart-o text-xs"></i>
                                </button>
                            </div>
                            <div class="p-3">
                                <h3 class="font-medium text-sm line-clamp-2 mb-1">15W快充无线充电器</h3>
                                <div class="flex text-yellow-400 text-xs mb-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <span class="text-accent font-bold text-sm">¥79</span>
                            </div>
                        </div>
                        
                        <!-- 推荐商品4 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/111/300/300" alt="智能灯泡" class="w-full h-36 object-cover">
                                <button class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1 rounded-full shadow-sm transition-colors">
                                    <i class="fa fa-heart-o text-xs"></i>
                                </button>
                            </div>
                            <div class="p-3">
                                <h3 class="font-medium text-sm line-clamp-2 mb-1">WiFi智能灯泡 变色</h3>
                                <div class="flex text-yellow-400 text-xs mb-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-o"></i>
                                    <i class="fa fa-star-o"></i>
                                </div>
                                <span class="text-accent font-bold text-sm">¥59</span>
                            </div>
                        </div>
                        
                        <!-- 推荐商品5 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/96/300/300" alt="智能手表表带" class="w-full h-36 object-cover">
                                <button class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1 rounded-full shadow-sm transition-colors">
                                    <i class="fa fa-heart-o text-xs"></i>
                                </button>
                            </div>
                            <div class="p-3">
                                <h3 class="font-medium text-sm line-clamp-2 mb-1">智能手表替换表带</h3>
                                <div class="flex text-yellow-400 text-xs mb-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star-half-o"></i>
                                </div>
                                <span class="text-accent font-bold text-sm">¥49</span>
                            </div>
                        </div>
                        
                        <!-- 推荐商品6 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden product-card-hover">
                            <div class="relative">
                                <img src="https://picsum.photos/id/180/300/300" alt="智能门锁" class="w-full h-36 object-cover">
                                <button class="absolute top-2 right-2 bg-white/80 backdrop-blur-sm text-gray-600 hover:text-accent p-1 rounded-full shadow-sm transition-colors">
                                    <i class="fa fa-heart-o text-xs"></i>
                                </button>
                            </div>
                            <div class="p-3">
                                <h3 class="font-medium text-sm line-clamp-2 mb-1">智能门锁 指纹密码</h3>
                                <div class="flex text-yellow-400 text-xs mb-1">
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i>
                                </div>
                                <span class="text-accent font-bold text-sm">¥899</span>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <!-- 16. 底部信息模块 -->
    <footer class="bg-neutral text-gray-400 py-12 mt-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="text-white text-xl font-bold flex items-center mb-4">
                        <i class="fa fa-shopping-bag mr-2"></i>
                        <span>优品商城</span>
                    </div>
                    <p class="text-sm mb-4">
                        优品商城致力于为消费者提供高品质智能产品，以优惠的价格和优质的服务满足您的需求。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-white font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">全部商品</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">新品上市</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">热卖榜单</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">限时特惠</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">品牌专区</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-medium mb-4">客户服务</h4>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="hover:text-white transition-colors">我的账户</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">订单查询</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">配送信息</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">退换政策</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">支付方式</a></li>
                        <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-white font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-sm">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3 text-primary"></i>
                            <span>北京市朝阳区科技园A座1001室</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3 text-primary"></i>
                            <span>400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3 text-primary"></i>
                            <span>service@youpin.com</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-clock-o mr-3 text-primary"></i>
                            <span>周一至周日 9:00-22:00</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="mt-12 pt-6 border-t border-gray-800 text-center text-sm">
                <p>© 2023 优品商城 版权所有 | 京ICP备12345678号-1</p>
                <p class="mt-2">正品保障 | 7天无理由退换 | 满99元免运费 | 专业客服支持</p>
            </div>
        </div>
    </footer>

    <!-- 17. 回到顶部按钮 -->
    <button id="back-to-top" class="fixed bottom-6 right-6 bg-primary text-white w-10 h-10 rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all z-50">
        <i class="fa fa-chevron-up"></i>
    </button>

    <!-- 18. 购物车快速预览 -->
    <div id="cart-preview" class="fixed bottom-6 left-6 bg-white rounded-full shadow-lg p-3 z-40 hover:bg-primary/5 transition-colors cursor-pointer">
        <div class="relative">
            <i class="fa fa-shopping-cart text-primary text-xl"></i>
            <span class="absolute -top-2 -right-2 w-5 h-5 bg-primary rounded-full text-white text-xs flex items-center justify-center">3</span>
        </div>
    </div>

    <script>
        // 移动端菜单切换
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 视图切换功能
        const gridViewBtn = document.getElementById('grid-view');
        const listViewBtn = document.getElementById('list-view');
        const productContainer = document.getElementById('product-container');
        
        gridViewBtn.addEventListener('click', () => {
            // 更新按钮样式
            gridViewBtn.classList.remove('bg-gray-100', 'text-gray-600');
            gridViewBtn.classList.add('bg-primary', 'text-white');
            
            listViewBtn.classList.remove('bg-primary', 'text-white');
            listViewBtn.classList.add('bg-gray-100', 'text-gray-600');
            
            // 更新布局为网格视图
            productContainer.classList.remove('grid-cols-1');
            productContainer.classList.add('sm:grid-cols-2', 'lg:grid-cols-3');
            
            // 调整卡片样式
            document.querySelectorAll('#product-container > article').forEach(article => {
                article.classList.remove('flex', 'flex-row');
                article.querySelector('img').classList.remove('h-40', 'w-1/3');
                article.querySelector('img').classList.add('h-40', 'w-full');
                article.querySelector('div:nth-child(2)').classList.remove('w-2/3', 'ml-4');
            });
        });
        
        listViewBtn.addEventListener('click', () => {
            // 更新按钮样式
            listViewBtn.classList.remove('bg-gray-100', 'text-gray-600');
            listViewBtn.classList.add('bg-primary', 'text-white');
            
            gridViewBtn.classList.remove('bg-primary', 'text-white');
            gridViewBtn.classList.add('bg-gray-100', 'text-gray-600');
            
            // 更新布局为列表视图
            productContainer.classList.remove('sm:grid-cols-2', 'lg:grid-cols-3');
            productContainer.classList.add('grid-cols-1');
            
            // 调整卡片样式为列表模式
            document.querySelectorAll('#product-container > article').forEach(article => {
                article.classList.add('flex', 'flex-row');
                const image = article.querySelector('img');
                image.classList.remove('h-40', 'w-full');
                image.classList.add('h-40', 'w-1/3', 'object-cover');
                const contentContainer = article.querySelector('div:nth-child(2)');
                contentContainer.classList.add('w-2/3', 'ml-4');
            });
        });
        
        // 销量趋势图表
        const ctx = document.getElementById('salesChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['1月', '5月', '10月', '15月', '20月', '25月', '30月'],
                datasets: [
                    {
                        label: '智能手表',
                        data: [650, 720, 810, 780, 920, 1050, 1120],
                        borderColor: '#FF6B35',
                        backgroundColor: 'rgba(255, 107, 53, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '无线耳机',
                        data: [820, 880, 910, 990, 1030, 1180, 1250],
                        borderColor: '#2EC4B6',
                        backgroundColor: 'rgba(46, 196, 182, 0.1)',
                        tension: 0.4,
                        fill: true
                    },
                    {
                        label: '智能家居',
                        data: [480, 510, 590, 630, 680, 750, 820],
                        borderColor: '#E71D36',
                        backgroundColor: 'rgba(231, 29, 54, 0.1)',
                        tension: 0.4,
                        fill: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            boxWidth: 10,
                            font: {
                                size: 10
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            font: {
                                size: 9
                            }
                        }
                    },
                    x: {
                        ticks: {
                            font: {
                                size: 9
                            }
                        }
                    }
                }
            }
        });
        
        // 倒计时功能
        function updateCountdown() {
            const countdownEl = document.getElementById('countdown');
            if (!countdownEl) return;
            
            // 模拟倒计时 - 实际应用中应使用真实的结束时间
            let timeStr = countdownEl.textContent;
            let [hours, minutes, seconds] = timeStr.split(':').map(Number);
            
            seconds -= 1;
            if (seconds < 0) {
                seconds = 59;
                minutes -= 1;
                if (minutes < 0) {
                    minutes = 59;
                    hours -= 1;
                    if (hours < 0) {
                        hours = 0;
                        minutes = 0;
                        seconds = 0;
                    }
                }
            }
            
            countdownEl.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // 每秒更新一次倒计时
        setInterval(updateCountdown, 1000);
        
        // 回到顶部按钮
        const backToTopBtn = document.getElementById('back-to-top');
        
        window.addEventListener('scroll', () => {
            // 导航栏滚动效果
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('shadow');
            } else {
                header.classList.remove('shadow');
            }
            
            // 回到顶部按钮显示/隐藏
            if (window.scrollY > 500) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }
        });
        
        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        // 为筛选按钮添加交互效果
        document.querySelectorAll('.btn-filter').forEach(btn => {
            btn.addEventListener('click', () => {
                // 找到同组中已激活的按钮并移除激活状态
                const parent = btn.parentElement;
                parent.querySelectorAll('.btn-filter').forEach(sibling => {
                    sibling.classList.remove('bg-primary/5', 'text-primary', 'border-primary/30');
                    sibling.classList.add('text-gray-600', 'border-gray-200');
                });
                
                // 为当前点击的按钮添加激活状态
                btn.classList.remove('text-gray-600', 'border-gray-200');
                btn.classList.add('bg-primary/5', 'text-primary', 'border-primary/30');
            });
        });
        
        // 收藏按钮交互
        document.querySelectorAll('.fa-heart-o').forEach(icon => {
            icon.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                icon.classList.remove('fa-heart-o');
                icon.classList.add('fa-heart', 'text-accent');
            });
        });
        
        document.querySelectorAll('.fa-heart').forEach(icon => {
            icon.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                icon.classList.remove('fa-heart', 'text-accent');
                icon.classList.add('fa-heart-o');
            });
        });
    </script>
</body>
</html>
